<!DOCTYPE html>
<html>
<head>
	<title>绘制镂空的正方形</title>
	<style type="text/css">
		canvas{
			border: 1px solid #ccc;
		}
	</style>
</head>
<body>
<canvas width="600" height="400"></canvas>
<script type="text/javascript">
var myCanvas = document.querySelector('canvas');
var ctx = myCanvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(100,100);
ctx.lineTo(200,20);
ctx.lineTo(300,100);
ctx.lineWidth = 10;
ctx.lineCap = 'butt';
ctx.lineJoin = 'miter';
ctx.strokeStyle = 'red';
ctx.stroke();


ctx.beginPath();
ctx.moveTo(100,300);
ctx.lineTo(200,220);
ctx.lineTo(300,300);
ctx.lineWidth = 30;
ctx.lineCap = 'round';
ctx.lineJoin = 'round';
ctx.strokeStyle = 'blue';
ctx.stroke();


ctx.beginPath();
ctx.moveTo(100,200);
ctx.lineTo(200,120);
ctx.lineTo(300,200);
ctx.lineWidth = 20;
ctx.lineCap = 'square';
ctx.lineJoin = 'bevel';
ctx.strokeStyle = 'green';
ctx.stroke();
// 在填充的时候会遵循非零环绕规则

</script>
</body>
</html>